<template>
  <view>
    <view v-if="orderInfo">
      <!-- 快递信息 -->
      <view class="express-info">
        <!-- 快递名称 -->
        <view class="express-info-name">
          <text>圆通速递 YT1234567890123</text>
          <view class="copy">查看物流</view>
        </view>
        <!-- 物流详情 -->
        <view class="express-info-detail">
          <uni-steps
            :options="[{title:'代付款',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]"
            direction="column" :active="1" active-color="#343334"></uni-steps>
        </view>
      </view>

      <!-- 商品展示区 -->
      <view class="goodsShow">
        <!-- 左边图片 -->
        <view class="left-img">
          <img :src="imgPrefixAddress + orderInfo.orders[0].picture">
        </view>
        <!-- 右边文字信息 -->
        <view class="right-text">
          <view class="title">
            {{ orderInfo.orders[0].goodsName}}
          </view>
          <view class="price">
            <text class="reaPri">¥{{orderInfo.order.paymentAmountS}}</text>
            <text class="reaNum">X{{orderInfo.orders[0].number}}</text>
          </view>
        </view>
      </view>
      <!-- 实付款和配送费 -->
      <view class="pay">
        <view class="pay-money">
          <text>实付款</text>
          <text>¥{{orderInfo.order.paymentAmountS}}</text>
        </view>
        <view class="peisong-money">
          <text>配送费</text>
          <text>¥{{orderInfo.order.freight}}</text>
        </view>
      </view>
      <!-- 订单详情 -->
      <view class="orders-detail">

        <view class="title">
          订单信息
        </view>
        <view class="orders-detail-item">
          <text class="bianhao"> 订单编号：</text>
          <text> {{orderInfo.order.orderNumber}}</text>
          <view class="copy" @tap="copyOrderNumber(orderInfo.order.orderNumber)">
            复制
          </view>
        </view>
        <view class="orders-detail-item">
          <text class="bianhao"> 下单时间：</text> <text>{{orderInfo.order.orderTime}}</text>
        </view>
        <view class="orders-detail-item">
          <text class="bianhao"> 付款时间：</text> <text>{{orderInfo.order.payTime}}</text>
        </view>
        <view class="orders-detail-item">
          <text class="bianhao"> 付款方式：</text> <text>{{orderInfo.order.method == '1'? '微信支付': '支付宝支付'}}</text>
        </view>
        <view class="orders-detail-item">
          <text class="bianhao"> 物流单号：</text>
          <text>REIURETR4975664946354986</text>
          <view class="copy">
            复制
          </view>
        </view>
        <!--        <view class="orders-detail-item">
          <text class="bianhao"> 完成时间：</text> <text>2022-12-12 22:22:00</text>
        </view> -->
        <view class="orders-detail-item">
          <text class="bianhao"> 配送方式：</text> <text> 快递配送</text>
        </view>
      </view>
      <!-- 联系客服 -->
      <view class="contact-customer-service">
        <uni-icons type="headphones" size="25"></uni-icons>
        <text>联系客服</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imgurl: '@/static/homebottom.jpg',
        orderInfo: {},
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com"
      };
    },
    methods: {
      // 复制订单号
      copyOrderNumber(num) {
        uni.setClipboardData({
          data: num,
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
      },
      // 根据id获取订单详情
      async getOrderDetail(id) {
        const res = await uni.$http.get(`/flow/order/details/${id}`)
        console.log(res);
        if (res.data.code !== 200) return uni.$showMsg('获取订单信息失败请返回重试')
        this.orderInfo = res.data.data
      }
    },
    onLoad(options) {
      this.getOrderDetail(options.orderId)
    }
  }
</script>

<style lang="scss">
  .express-info {
    padding: 0 16px;

    .express-info-name {
      display: flex;
      justify-content: space-between;
      align-items: center;

      text {
        color: #3D3D3D;
        font-size: 12px;
      }

      .copy {
        padding: 0 5px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #3D3D3D;
        border: 1px solid #3D3D3D;
        border-radius: 10px;
      }
    }

    .express-info-detail {
      text {
        font-size: 12px;
        color: #3D3D3D;
        margin-left: 30px;
      }
    }
  }

  // 商品展示区
  .goodsShow {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    padding: 0 15px;

    // 左边图片
    .left-img {
      width: 80px;
      height: 64px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    // 右边文字
    .right-text {
      width: 255px;
      height: 64px;
      padding: 0 10px;

      .title {
        font-size: 12px;
        color: #000000;
        white-space: normal;
        height: 32px;
        line-height: 15px;
      }

      .price {
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .reaPri {
          font-size: 14px;
          color: #A50000;
        }

        .reaNum {
          font-size: 12px;
          color: #3D3D3D;
        }
      }
    }

    // image {
    //   width: 90px;
    //   height: 82px;
    // }
  }

  .pay {
    height: 100px;
    background-color: #fff;
    padding: 0 16px;

    view {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      line-height: 50px;
      color: #3D3D3D;
      font-size: 14px;
    }
  }

  // d订单信息
  .orders-detail {
    margin-top: 20px;
    padding: 0 16px;

    .title {
      font-size: 18px;
      color: #3D3D3D;
    }

    .orders-detail-item {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      color: #3D3D3D;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .bianhao {
        color: #8F9CA9;
      }

      .copy {
        width: 44px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #3D3D3D;
        border: 1px solid #3D3D3D;
        border-radius: 10px;
      }
    }
  }

  // 联系客服哈
  .contact-customer-service {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2rpx solid gray;
    margin-top: 20px;
    text-align: center;
    width: 100%;
    height: 68px;
    color: black;
    line-height: 68px;
    background-color: #fff;
  }
</style>